import React, {useState, useEffect} from "react";
import {Button, Card} from 'antd';

function Chlidren() {
    const [count, setCount] = useState(0)
    let timer = null

    const incrementCount = () => {
        timer = setInterval(() => {
            setCount(prevState => prevState + 1)
            setCount(prevState => {
                if (prevState >= 10) clearInterval(timer)
                return prevState
            })
        }, 1000)
    }
    /**
     * 写法4  回调有返回值(返回值必须是一个函数)  清除副作用 页面卸载时触发  一般用来清楚定时器等操作
     */

    useEffect(() => {
        incrementCount()

        return () => {
            console.log('子组件卸载===清除子组件定时器====')
            clearInterval(timer)
        }
    }, [])

    return (
        <h3 style={{marginBottom:10}}>我是 Chlidren 组件,count值为:{count}</h3>
    )
}

export default () => {
    const [count, setCount] = useState(0)
    const [isUnload, setIsUnload] = useState(false)

    /**
     * 写法1 不传入依赖项数组  页面每次数据更新 组件重新渲染 都会执行
     */
    useEffect(() => {
        console.log('页面任意数据每次更新都触发-----useEffect')
    })
    /**
     * 写法2  依赖项传入 [] 空数组  只在页面挂载完成后 执行  以后页面数据更新 组件重新渲染酒不会执行了
     */
    useEffect(() => {
        console.log('只在页面首次挂载完成后触发-----useEffect')
    }, [])
    /**
     * 写法3  传入 依赖项  依赖项中指定的数据更新后触发   类似 Vue watch 监听属性
     */
    useEffect(() => {
        console.log('只在依赖项 count 值改变后触发-----useEffect')
    }, [count])


    return (
        <Card hoverable>
            <div>
                <div style={{marginBottom: 10}}>
                    <h1>useEffect的使用:</h1>
                    <div>
                        useEffect可以让你在函数组件中执行副作用操作，<span className={'definition-2'}>接收两个参数</span>，第一个参数是要执行的函数callback,第二个参数是可选的依赖项数
                        组dependencies。 <span className={'definition-2'}>其中依赖项是可选的</span>，如果不指定，那么callback就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖
                        项中的值发生变化的时候，它才会执行。简单来说就是当我们的依赖项发生发生变化的时候，可以异步的执行里面的回调。
                        <span className={'definition-2'}>注意：useEffect是在render之后执行</span>
                    </div>
                </div>
            </div>
            <div>
                <h3>当前count值为:{count}</h3>
                {!isUnload && <Chlidren></Chlidren>}
                <Button onClick={() => setCount(count + 1)}>点击+1</Button>
                <Button onClick={() => setIsUnload(!isUnload)}>点击{isUnload ? '显示' : '卸载'}子组件</Button>
            </div>

        </Card>

    )
}